<template>
    <div class="main-body">

        <el-row style="padding: 5px 0px;">
            <el-col :span="2" class="item_label">用户名/登录名</el-col>
            <el-col :span="4">
                <el-input v-model="query.name" clearable></el-input>
            </el-col>
            <el-col :span="2" class="item_label">登录时间</el-col>
            <el-col :span="8">
                <el-date-picker
                        v-model="query.loginTime" class="w100"
                        type="datetimerange" value-format=" yyyy-MM-dd HH:mm:ss" format="yyyy-MM-dd HH:mm:ss"
                        :picker-options="this.$constant.pickerOptions "
                        range-separator="至"
                        start-placeholder="开始时间"
                        end-placeholder="结束时间"
                        align="right">
                </el-date-picker>
            </el-col>
            <el-col :span="4">
              <!--  <el-checkbox v-model="query.isOnline" label="在线"></el-checkbox>-->
            </el-col>

            <el-col :span="4" style="text-align: right">
                <el-button  type="primary" plain  icon="el-icon-search" @click="loadData()" >查询</el-button>
            </el-col>
        </el-row>
        <div class="search-line" ></div>
        <el-table
                border stripe highlight-current-row header-cell-class-name="t_h_cell" class="data-table"
                :data="tableData.rows"
                :v-loading="loading"
                :height=dataTableHeight ref="tableRef"
                @current-change="dataChange" >

            <el-table-column :show-overflow-tooltip="true" sortable width="120"
                    prop="userName" label="用户名">
            </el-table-column>

            <el-table-column :show-overflow-tooltip="true" sortable width="120"
                    prop="loginName" label="登录名">
            </el-table-column>

            <el-table-column :show-overflow-tooltip="true" sortable width="100"
                             prop="ip" label="登录IP">
            </el-table-column>

            <el-table-column :show-overflow-tooltip="true" sortable width="150"
                             prop="loginTime" :formatter="formatDate" label="登录时间">
            </el-table-column>

            <el-table-column :show-overflow-tooltip="true" sortable
                             prop="loginOutTime" :formatter="formatDate" label="登出时间">
            </el-table-column>

        </el-table>

        <table-pager :loading.sync="loading" :size.sync="tableData.size" :page.sync="tableData.page" :total.sync="tableData.total"
                     @loadData="loadData"></table-pager>


    </div>

</template>

<script>
    export default {
        name:'login_log_main',
        components: {},

        data() {
            return {
                query: {},
                offsetHeight: 45,
                dataTableHeight: 400,
                currentRow: null,
                editVisible: false,
                loading: false,
                tableData: {
                    rows: [],
                    page: 1,
                    size: 20,
                    total: 0
                },
            }
        },
        created() {

        },
        mounted() {
            this.$nextTick(function () {
                this.dataTableHeight = window.innerHeight - this.$refs.tableRef.$el.offsetTop - this.offsetHeight;
            });
            this.loadData();
        },
        methods: {
            dataChange(val) {
                this.currentRow = val;
            },
            indexData(index) {
                return index + (this.tableData.size * (this.tableData.page - 1)) + 1;
            },
            loadData() {
                let _this = this;
                let url = '/loginLog/dataPager';
                _this.$utils.loadTableData(_this, url);
            },
        },
        watch: {
            '$store.state.clientHeight': function (clientHeight) { //监听屏幕高度变化
                let _this = this;
                setTimeout(function () {
                    _this.dataTableHeight = clientHeight - _this.$refs.tableRef.$el.offsetTop - _this.offsetHeight;
                }, 200)
            }
        }

    }

</script>
